<template>
	<view class="page mine">
		<nav-header :show-left="false" title="" bgColor="#3B82F6" :show-border="false">
			<template v-slot:right>
				<view class="top-icon">
					<view @click="goKeFu">
						<svg-icon icon="kefu"></svg-icon>
					</view>
					<view @click="goSetting" class="shezhi">
						<svg-icon icon="shezhi"></svg-icon>
					</view>
				</view>
			</template>
		</nav-header>
		
		<view class="bac-img">
			<view class="content" @click="goUserInfo()">
				<view class="avatar" @tap.stop="onShowFullImage">
					<head-image :name="userInfo.nickName" :url="userInfo.headImage" :size="110"></head-image>
				</view>
				<view class="info-item">
					<view class="info-primary">
						<text class="info-username">
							{{ userInfo.userName }}
						</text>
						<image :src="getResource('/icon/code2.svg')" class="code" @tap.stop.native="goCodePage"></image>
						<!-- <text v-show="userInfo.sex==0" class="iconfont icon-man" color="darkblue"></text>
						<text v-show="userInfo.sex==1" class="iconfont icon-girl" color="darkred"></text> -->
					</view>
					<view class="info-number">
						<text>
							友号 ：{{ userInfo.userFriendId }}
						</text>
						<text class="shop-number">
							商号 ：{{ userInfo.userBusinessId }}
						</text>
					</view>
					<view class="invite">

						<view class="have-code" v-if="shareInfo && shareInfo.shareCode">
							<text>我的邀请码：</text>
							<text @click.stop="getSharingCode">{{ shareInfo.shareCode }}</text>
							<view class="copy" @click.stop="copy2">
								<svg-icon icon="copy2" :width="45"></svg-icon>
							</view>
						</view>
						<view v-else>
							<text>我的邀请码：</text>
							<text @click.stop="getSharingCode">点击获取</text>
						</view>
					</view>
				</view>
				<view class="info-arrow" @tap.stop.native="goUserInfo">
					<up-icon name="arrow-right" color="#fff" size="20"></up-icon>
				</view>
			</view>
			<!-- <view class="line"></view> -->

			<view class="mime-info">
				<view class="info">
					<view class="info-item">
						<view class="item-text">{{ totalAccountAmount }}</view>
						<view class="item-title">余额</view>
					</view>
					<view class="info-item">
						<view class="item-text">{{ pendingAccountAmount }}</view>
						<view class="item-title">待入帐</view>
					</view>
					<view class="info-item">
						<view class="item-text">{{ shareInfo.total }}</view>
						<view class="item-title">拉新</view>
					</view>
					<view class="info-item" @click="goPage('/pageSubOne/wallet/wallet')">
						<svg-icon icon="money"></svg-icon>
						<view class="item-title">钱包</view>
					</view>
				</view>
			</view>
		</view>

		<view class="vip">
			<view class="vip-info" @click="goLevel">
				<view>
					<img src="https://axure-file.lanhuapp.com/md5__e35e0f72f6e51e1f67e16a302a3e2d01.png" alt=""
						class="vip-img">
				</view>
				<view class="info-middle">
					<view class="tip">
						<text>升级会员享受更多权益</text>
					</view>
					<view class="line">
						<up-line-progress :percentage="progressPercentage" activeColor="#4A6E9E"></up-line-progress>
					</view>
					<view class="level">
						<text>V{{ initialLevel }}</text>
						<text class="tips">还差{{ remainingUsersForNextLevel }}人升级LV{{ nextLevel }}</text>
						<text>V{{ nextLevel }}</text>
					</view>
				</view>
				<view>
					<img src="https://axure-file.lanhuapp.com/md5__21e632721073e2cf04f1f03047493e8f.png" alt=""
						class="vip-img">
				</view>
			</view>
		</view>

		<view class="make-money">
			<view class="money">
				<view class="money-up">
					<text>我要赚钱</text>
					<text>活动介绍</text>
				</view>
				<view class="money-drop">
					<view class="message">
						<view class="scroll-container">
							<view class="scroll-item" v-for="(item, index) in items" :key="index">
								<text>{{ item.text }}</text>
							</view>
						</view>
					</view>
					<view>
						<text>查看更多</text>
					</view>
					<view>
						<up-icon name="arrow-right" color="#000" size="20"></up-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="function">
			<view class="all">
				<view class="up">
					<text>功能</text>
				</view>
				<view class="drop">
					<view v-for="item in funList" :key="item.id" class="funList" @click="goPage(item.path)">
						<svg-icon :icon="item.img" :width="80"></svg-icon>
						<text>{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="explain">
			<text>友星缘智能科技有限公司出品</text>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			items: [{
				text: '张三已经在活动中邀请55.7k，获得55700元奖励！'
			},
			{
				text: '李四已经在活动中邀请60.5k，获得60500元奖励！'
			},
			{
				text: '王五已经在活动中邀请48.9k，获得48900元奖励！'
			},
			{
				text: 'admin已经在活动中邀请72.3k，获得72300元奖励！'
			},
			{
				text: 'lululu已经在活动中邀请59.2k，获得59200元奖励！'
			}
			],
			shareInfo: {},

			funList: [{
				id: 1,
				img: "info",
				text: "个人信息",
				path: '/pageSubOne/mine/mine-info'
			},
			{
				id: 2,
				img: "collect",
				text: "收藏"
			},
			{
				id: 3,
				img: "setting2",
				text: "设置",
				path: '/pageSubOne/mine/mine-setting'
			},
				/* {
					id: 4,
					img: "wait",
					text: "敬请期待"
				} */
			]
		}
	},
	methods: {

		onShowFullImage() {
			let imageUrl = this.userInfo.headImage;
			if (imageUrl) {
				uni.previewImage({
					urls: [imageUrl]
				})
			}
		},

		// 获取邀请码
		getSharingCode() {
			uni.navigateTo({
				url: "/pageSubOne/mine/mine-share-code"
			})
		},

		_getData() {
			this.$http({
				url: `/share/shareAggregateData`,
				method: 'GET'
			}).then(res => {
				this.shareInfo = res
			})
		},
		// 拷贝邀请码
		copy2() {
			let text = this.shareInfo.shareCode

			uni.setClipboardData({
				data: text.toString(),
				success: function (res) {
					console.log('复制的信息2：', text);
					uni.showToast({
						title: '复制成功',
					});
				}
			});
		},
		goUserInfo() {
			uni.navigateTo({
				url: "/pageSubOne/mine/mine-info"
			})
		},
		onModifyInfo() {
			uni.navigateTo({
				url: "/pageSubOne/mine/mine-edit"
			})
		},
		goCodePage() {
			uni.navigateTo({
				url: "/pageSubOne/mine/mine-code"
			})
		},
		goQuestion() {
			uni.navigateTo({
				url: "/pageSubOne/mine/mine-question"
			})
		},
		goKeFu() {
			uni.navigateTo({
				url: "/pageSubOne/mine/mine-kefu"
			})
		},
		goSetting() {
			uni.navigateTo({
				url: "/pageSubOne/mine/mine-setting"
			})
		},
		goLevel() {
			uni.navigateTo({
				url: "/pageSubOne/mine/mine-level"
			})
		},
		onModifyPassword() {
			uni.navigateTo({
				url: "/pageSubOne/mine/mine-password"
			})
		},
		onQuit() {
			uni.showModal({
				title: '确认退出?',
				success: (res) => {
					if (res.confirm) {
						console.log(getApp())
						getApp().$vm.exit()
					}
				}
			});
		},
	},
	computed: {
		userInfo() {
			return this.userStore.userInfo;
			console.log(this.userStore.userInfo)
		},
		progressPercentage() {
			return (this.shareInfo.progress / this.shareInfo.progressMax) * 100;
		},

		remainingUsersForNextLevel() {
			// 计算还需要多少人才能达到下一等级
			if (this.shareInfo.level === null) {
				return 10;
			}
			return this.shareInfo.progressMax - this.shareInfo.progress;
		},
		initialLevel() {
			if (this.shareInfo.level === null) {
				return +this.shareInfo.level + 1;
			}
			return this.shareInfo.level
		},
		nextLevel() {
			// 计算下一等级
			if (this.shareInfo.level === null) {
				return this.shareInfo.level + 2;
			}
			return this.shareInfo.level + 1;
		},
		totalAccountAmount() {
			return this.shareInfo.totalAccountAmount
		},
		pendingAccountAmount() {
			return this.shareInfo.pendingAccountAmount
		}
	},
	onShow() {
		this._getData()
	},


}
</script>

<style scoped lang="scss">
.mine {
	position: relative;

	.top-icon {
		// padding: 20rpx 30rpx 0 30rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.shezhi {
			margin-left: 40rpx;
		}
	}

	.bac-img {
		width: 100%;
		height: 420rpx;
		background-color: #3B82F6;

		.content {
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 40rpx;
			padding: 30rpx;

			.info-item {
				display: flex;
				flex: 1;
				align-items: flex-start;
				flex-direction: column;
				color: #fff;

				.code {
					margin-left: 20rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.info-primary {
					display: flex;
					align-items: center;

					.info-username {
						font-size: 35rpx;
						font-weight: 600;
						margin-right: 10rpx;
					}

					.icon-man {
						color: darkblue;
					}

					.icon-girl {
						color: darkred;
					}
				}

				.info-number {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					font-size: 30rpx;

					.shop-number {
						margin-left: 25rpx;
					}
				}

				.invite {
					margin-top: 20rpx;
					font-size: 30rpx;

					.have-code {
						display: flex;
						align-items: center;

						.copy {
							margin-left: 10rpx;
						}
					}

				}
			}

			.info-arrow {
				width: 50rpx;
				font-size: 30rpx;
				font-weight: 600;

				.code {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.mime-info {
			width: 100%;

			.info {
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 0 0 40rpx 0;

				.info-item {
					display: flex;
					align-items: center;
					flex-direction: column;

					.item-text {
						font-size: 35rpx;
						font-weight: 600;
						color: #fff;

						text {
							color: #fff;
							font-size: 30rpx;
							font-weight: normal;
						}
					}

					.item-title {
						color: #fff;
						margin-top: 10rpx;
					}
				}
			}
		}

	}

	.vip {
		padding: 10rpx;

		.vip-info {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.vip-img {
				width: 80rpx;
				height: 80rpx;
			}

			.info-middle {
				flex: 0.9;

				.tip {
					font-size: 30rpx;
					color: #4A6E9E;
					font-weight: 600;
				}

				.line {
					padding: 10rpx 0;
				}

				.level {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 25rpx;

					text:first-child {
						color: #4A6E9E;
						font-weight: 600;
					}

					.tips {
						font-size: 22rpx;
					}

					text:last-child {
						color: #EAB53B;
						font-weight: 600;
					}
				}
			}
		}
	}

	.make-money {
		padding: 30rpx;

		.money {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.money-up {
				text:first-child {
					font-weight: 600;
					font-size: 42rpx;
				}

				text:last-child {
					margin-left: 40rpx;
					font-size: 30rpx;
					// font-weight: 600;
				}
			}

			.money-drop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #FFFAA4;
				font-size: 25rpx;
				padding: 10rpx;
				margin-top: 20rpx;
				height: 70rpx;

				.message {
					display: flex;
					flex-direction: column;
					flex: 1;
					overflow: hidden;
					position: relative;
					height: 40px;
					/* 根据需要调整高度 */

					.scroll-container {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						height: 300%;
						/* 两倍于可见区域的高度 */
						animation: scroll 8s linear infinite;
						/* 滚动速度*/
					}

					.scroll-item {
						height: 20px;
						/* 每个项目的高度 */
						line-height: 20px;
						/* 使文本垂直居中 */
						white-space: nowrap;
					}
				}
			}
		}
	}


	.function {
		padding: 0 30rpx 30rpx 30rpx;

		.all {
			display: flex;
			flex-direction: column;
			justify-content: center;

			.up {
				font-weight: 600;
				font-size: 42rpx;
			}

			.drop {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 40rpx;

				.funList {
					display: flex;
					align-items: center;
					flex-direction: column;
					font-size: 28rpx;
				}
			}
		}
	}

	.explain {
		text-align: center;
		color: #aaa;
		font-size: 25rpx;

		position: absolute;
		bottom: 10rpx;
		left: 28%;
	}

	.friend-txl {
		width: 100%;

		.txl {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.txl-left {
				display: flex;
				align-items: center;

				text {
					margin-left: 40rpx;
				}

				.txl-img {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}

	.btn-group {
		margin: 100rpx;

		.btn {
			margin-top: 20rpx;
		}

	}
}

@keyframes scroll {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-50%);
		/* 滚动到顶部 */
	}
}
</style>